<template>
  <!-- navBar -->
  <wd-navbar title="药品订单" left-text="" left-arrow @click-left="handleClickLeft" />
  <!-- tabs -->
  <wd-tabs v-model="tab">
    <block v-for="item in tabCount" :key="item">
      <wd-tab :title="`${item}`">
        <!-- <view class="content">内容{{ item }}</view> -->
      </wd-tab>
    </block>
  </wd-tabs>
  <!-- 内容 -->
  <view class="payRecords" style="background-color: #ffffff">
    <view
      class="payRecords_top"
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-right: 30rpx;
        margin-left: 30rpx;
      "
    >
      <text style="font-size: 26rpx; color: #848484">订单编号 202201127465</text>
      <text style="font-size: 26rpx; color: #f2994a">待支付</text>
    </view>
    <view class="payRecords_center">
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <text style="margin-left: 185rpx; color: #3c3e42">共2件商品 合计: ￥49.00 (运费￥0.00)</text>
    </view>
    <view class="payRecords_bottom" style="display: flex; padding-left: 290rpx; margin-top: 30rpx">
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          background: #fafafa;
          border: 2px solid #ededede5;
          border-radius: 55px;
        "
      >
        取消订单
      </button>
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          color: #16c2a3;
          background: #ffffff;
          border: 2px solid #16c2a3;
          border-radius: 55px;
        "
      >
        继续支付
      </button>
    </view>
  </view>
  <view class="payRecords" style="background-color: #ffffff">
    <view
      class="payRecords_top"
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-right: 30rpx;
        margin-left: 30rpx;
      "
    >
      <text style="font-size: 26rpx; color: #848484">订单编号 202201127465</text>
      <text style="font-size: 26rpx; color: #848484">待发货</text>
    </view>
    <view class="payRecords_center">
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <text style="margin-left: 185rpx; color: #3c3e42">共2件商品 合计: ￥49.00 (运费￥0.00)</text>
    </view>
    <view class="payRecords_bottom" style="display: flex; padding-left: 530rpx; margin-top: 30rpx">
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          color: #16c2a3;
          background: #ffffff;
          border: 2px solid #16c2a3;
          border-radius: 55px;
        "
      >
        提醒发货
      </button>
    </view>
  </view>
  <view class="payRecords" style="background-color: #ffffff">
    <view
      class="payRecords_top"
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-right: 30rpx;
        margin-left: 30rpx;
      "
    >
      <text style="font-size: 26rpx; color: #848484">订单编号 202201127465</text>
      <text style="font-size: 26rpx; color: #16c2a3">待收货</text>
    </view>
    <view class="payRecords_center">
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <text style="margin-left: 185rpx; color: #3c3e42">共2件商品 合计: ￥49.00 (运费￥0.00)</text>
    </view>
    <view class="payRecords_bottom" style="display: flex; padding-left: 530rpx; margin-top: 30rpx">
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          color: #16c2a3;
          background: #ffffff;
          border: 2px solid #16c2a3;
          border-radius: 55px;
        "
      >
        确认收货
      </button>
    </view>
  </view>
  <view class="payRecords" style="background-color: #ffffff">
    <view
      class="payRecords_top"
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-right: 30rpx;
        margin-left: 30rpx;
      "
    >
      <text style="font-size: 26rpx; color: #848484">订单编号 202201127465</text>
      <text style="font-size: 26rpx; color: #848484">已取消</text>
    </view>
    <view class="payRecords_center">
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <text style="margin-left: 185rpx; color: #3c3e42">共2件商品 合计: ￥49.00 (运费￥0.00)</text>
    </view>
    <view class="payRecords_bottom" style="display: flex; padding-left: 530rpx; margin-top: 30rpx">
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          background: #fafafa;
          border: 2px solid #ededede5;
          border-radius: 55px;
        "
      >
        删除订单
      </button>
    </view>
  </view>
  <view class="payRecords" style="background-color: #ffffff">
    <view
      class="payRecords_top"
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-right: 30rpx;
        margin-left: 30rpx;
      "
    >
      <text style="font-size: 26rpx; color: #848484">订单编号 202201127465</text>
      <text style="font-size: 26rpx; color: #3c3e42">已完成</text>
    </view>
    <view class="payRecords_center">
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <view class="content">
        <view class="conten_left">
          <text>药品照片</text>
        </view>
        <view class="conten_center">
          <text>优赛明 维生素E乳</text>
          <view>
            <text class="prescription">处药方</text>
            <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
          </view>
          <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
        </view>
        <view class="conten_right" style="margin-right: 60rpx">
          <text>x1</text>
        </view>
      </view>
      <text style="margin-left: 185rpx; color: #3c3e42">共2件商品 合计: ￥49.00 (运费￥0.00)</text>
    </view>
    <view class="payRecords_bottom" style="display: flex; padding-left: 290rpx; margin-top: 30rpx">
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          background: #fafafa;
          border: 2px solid #ededede5;
          border-radius: 55px;
        "
      >
        删除订单
      </button>
      <button
        style="
          width: 164rpx;
          height: 59rpx;
          font-size: 25rpx;
          line-height: 59rpx;
          color: #16c2a3;
          background: #ffffff;
          border: 2px solid #16c2a3;
          border-radius: 55px;
        "
      >
        再次购买
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack();
}
const tab = ref<number>(0);
const tabCount = ref(["全部", "待支付", "待发货", "待收货", "已完成"]);
</script>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 213rpx;
  margin-right: 30rpx;
  margin-left: 30rpx;
}

.conten_left {
  width: 160rpx;
  height: 143rpx;
  background-color: #c4c4c4;
  border-radius: 4rpx;
}
.prescription {
  width: 96rpx;
  height: 40rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  color: white;
  text-align: center;
  background: #16c2a3;
  border: 1px solid #16c2a3;
  border-radius: 2rpx;
}
</style>
